<template>
  <view class="classlist">
    <view class="loadingLayout" v-if="!classList.length && !noData">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view class="content">
      <navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList" :key="item._id">
        <image :src="item.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>
    <view class="loadingLayout" v-if="!classList.length || !noData">
      <uni-load-more :status="noData?'noMore':'loading' "></uni-load-more>
    </view>

    <view class="safe-area-insert-bottom"></view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  import {
    apiGetClassList,
    apiGetHistoryList
  } from '@/api/apis.js'
  import {
    onLoad,
    onReachBottom,
    onShareAppMessage,
    onShareTimeline,
    onUnload
  } from '@dcloudio/uni-app'
  import {gotoHome} from '@/utils/common.js'

  // 数据
  const classList = ref([]);
  const noData = ref(false);
  const queryParams = {
    pageNum: 1,
    pageSize: 12
  }
  let pageName = ref();
  
  // 方法
  async function getClassList() {
    let res;
    if(queryParams.classid) res = await apiGetClassList(queryParams)
    if(queryParams.type) res = await apiGetHistoryList(queryParams)
    // console.log(res)
    
    classList.value = [...classList.value, ...res.data]
    if (queryParams.pageSize > res.data.length) {
      noData.value = true
    }
    uni.setStorageSync("storgClassList", classList.value)

    // console.log(classList.value)
  }


  // 生命周期
  // 分享给好友
  onShareAppMessage((e) => {
    return {
      title: "小张壁纸-"+pageName,
      path: "pages/classList/classList?id="+queryParams.classid+"&name="+pageName
    }
  })

  // 分享朋友圈
  onShareTimeline(() => {
    return {
      title: "小张壁纸-"+pageName
    }
  })
  
  onUnload(()=>{
    uni.removeStorageSync("storgClassList")
  })

  onLoad((e) => {
    // console.log(e)
    let {
      id = null, name = null,type=null
    } = e;
    if(!id){
      gotoHome()
    }
    if(type) queryParams.type = type
    if(id) queryParams.classid = id
    queryParams.classid = id;
    // console.log(id, name);
    pageName = name
    uni.setNavigationBarTitle({
      title: name
    })
    getClassList()
  })

  onReachBottom(() => {
    if (noData.value) return;
    queryParams.pageNum++;
    getClassList();
  })
</script>

<style lang="scss" scoped>
  .classlist {
    .content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5rpx;
      padding: 5rpx;

      .item {
        height: 440rpx;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
</style>